<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { Field, Button, Icon } from 'vant'

defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['send', 'stop'])

const inputText = ref('')

const handleSend = () => {
  if (!inputText.value.trim()) return
  emit('send', inputText.value)
  inputText.value = ''
}

const handleStopStream = () => {
  emit('stop')
}

const adjustTextareaHeight = (element: HTMLTextAreaElement) => {
  element.style.height = 'auto'
  const lineHeight = 24
  const maxHeight = lineHeight * 6
  const newHeight = Math.min(element.scrollHeight, maxHeight)
  element.style.height = `${newHeight}px`
}

const handleTextareaInput = (event: Event) => {
  const textarea = event.target as HTMLTextAreaElement
  adjustTextareaHeight(textarea)
}

watch(inputText, () => {
  nextTick(() => {
    const textareaElement = document.querySelector('.chat-textarea textarea') as HTMLTextAreaElement
    if (textareaElement) {
      adjustTextareaHeight(textareaElement)
    }
  })
})
</script>

<template>
  <div class="input-area">
    <Field
      v-model="inputText"
      type="textarea"
      rows="1"
      autosize
      class="chat-textarea"
      placeholder="请输入您的问题"
      :disabled="disabled || loading"
      @input="handleTextareaInput"
      @keyup.enter.prevent="handleSend"
    >
      <template #button>
        <Button 
          v-if="!loading"
          class="action-button send-button" 
          size="small" 
          :disabled="!inputText.trim() || disabled" 
          @click="handleSend"
        >
          <Icon name="guide-o" size="18" />
          <span>发送</span>
        </Button>
        <Button 
          v-else
          class="action-button stop-button" 
          size="small" 
          @click="handleStopStream"
        >
          <Icon name="close" size="18" />
          <span>停止</span>
        </Button>
      </template>
    </Field>
  </div>
</template>

<style lang="scss" scoped>
.input-area {
  padding: 12px 16px;
  background-color: white;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  .chat-textarea {
    background-color: #f8f9fa;
    border-radius: 20px;
    
    :deep(.van-field__body) {
      padding-right: 8px;
    }
    
    :deep(.van-field__control) {
      min-height: 24px;
      max-height: 144px;
      line-height: 24px;
      padding: 8px 0;
      overflow-y: auto;
      resize: none;
      font-size: 15px;
    }
    
    :deep(.van-field__button) {
      align-self: center;
    }
  }
  
  .action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    
    &.send-button {
      background-color: #4080ff;
      color: white;
      
      &:active {
        background-color: #3070ee;
      }
      
      &[disabled] {
        background-color: #a7c0ff;
        opacity: 0.8;
      }
    }
    
    &.stop-button {
      background-color: #ff4d4f;
      color: white;
      
      &:active {
        background-color: #f5222d;
      }
    }
  }
}
</style>